{% extends "base.html" %}

{% block title %}仪表板 - 学术研究自动化平台{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 mb-0">
                    <i class="fas fa-tachometer-alt me-2 text-primary"></i>
                    仪表板
                </h1>
                <p class="text-muted mb-0">欢迎回来，{{ user.username }}！</p>
            </div>
            <div>
                <span class="badge bg-primary">{{ user.role|title }}</span>
            </div>
        </div>
    </div>
</div>

<!-- 统计卡片 -->
<div class="row g-4 mb-4">
    <div class="col-xl-3 col-md-6">
        <div class="card bg-primary text-white h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="small">我的项目</div>
                        <div class="h2 mb-0">{{ stats.projects }}</div>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-project-diagram fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
            <div class="card-footer d-flex align-items-center justify-content-between small">
                <a class="text-white stretched-link" href="{{ url_for('projects') }}">查看详情</a>
                <div class="text-white"><i class="fas fa-angle-right"></i></div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6">
        <div class="card bg-success text-white h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="small">数据分析</div>
                        <div class="h2 mb-0">{{ stats.analyses }}</div>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-chart-bar fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
            <div class="card-footer d-flex align-items-center justify-content-between small">
                <a class="text-white stretched-link" href="{{ url_for('analysis') }}">查看详情</a>
                <div class="text-white"><i class="fas fa-angle-right"></i></div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6">
        <div class="card bg-warning text-white h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="small">协作项目</div>
                        <div class="h2 mb-0">{{ stats.collaborations }}</div>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-users fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
            <div class="card-footer d-flex align-items-center justify-content-between small">
                <a class="text-white stretched-link" href="{{ url_for('collaboration') }}">查看详情</a>
                <div class="text-white"><i class="fas fa-angle-right"></i></div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6">
        <div class="card bg-info text-white h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="small">系统状态</div>
                        <div class="h2 mb-0">正常</div>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-server fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
            <div class="card-footer d-flex align-items-center justify-content-between small">
                <span class="text-white">系统运行正常</span>
                <div class="text-white"><i class="fas fa-check"></i></div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- 最近活动 -->
    <div class="col-xl-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="fas fa-clock me-2"></i>
                最近活动
            </div>
            <div class="card-body">
                <div class="timeline">
                    {% for activity in stats.recent_activity %}
                    <div class="timeline-item">
                        <div class="timeline-marker bg-primary"></div>
                        <div class="timeline-content">
                            <h6 class="timeline-title">{{ activity.action }}</h6>
                            <p class="timeline-text text-muted small">{{ activity.time }}</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="card-footer">
                <a href="#" class="btn btn-sm btn-outline-primary">查看所有活动</a>
            </div>
        </div>
    </div>
    
    <!-- 快速操作 -->
    <div class="col-xl-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="fas fa-bolt me-2"></i>
                快速操作
            </div>
            <div class="card-body">
                <div class="row g-3">
                    {% if 'create_research' in user.permissions %}
                    <div class="col-6">
                        <a href="{{ url_for('create_project') }}" class="btn btn-outline-primary w-100 h-100 d-flex flex-column justify-content-center">
                            <i class="fas fa-plus fa-2x mb-2"></i>
                            <span>创建项目</span>
                        </a>
                    </div>
                    {% endif %}
                    
                    <div class="col-6">
                        <a href="{{ url_for('analysis') }}" class="btn btn-outline-success w-100 h-100 d-flex flex-column justify-content-center">
                            <i class="fas fa-chart-line fa-2x mb-2"></i>
                            <span>数据分析</span>
                        </a>
                    </div>
                    
                    <div class="col-6">
                        <a href="{{ url_for('collaboration') }}" class="btn btn-outline-warning w-100 h-100 d-flex flex-column justify-content-center">
                            <i class="fas fa-handshake fa-2x mb-2"></i>
                            <span>协作管理</span>
                        </a>
                    </div>
                    
                    <div class="col-6">
                        <a href="{{ url_for('settings') }}" class="btn btn-outline-info w-100 h-100 d-flex flex-column justify-content-center">
                            <i class="fas fa-cog fa-2x mb-2"></i>
                            <span>系统设置</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 图表区域 -->
<div class="row mt-4">
    <div class="col-xl-8">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-chart-area me-2"></i>
                项目进度趋势
            </div>
            <div class="card-body">
                <canvas id="progressChart" width="100%" height="40"></canvas>
            </div>
        </div>
    </div>
    
    <div class="col-xl-4">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-pie-chart me-2"></i>
                项目状态分布
            </div>
            <div class="card-body">
                <canvas id="statusChart" width="100%" height="40"></canvas>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // 项目进度趋势图
    const progressCtx = document.getElementById('progressChart').getContext('2d');
    new Chart(progressCtx, {
        type: 'line',
        data: {
            labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
            datasets: [{
                label: '完成项目',
                data: [2, 3, 1, 4, 2, 3],
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.1)',
                tension: 0.1
            }, {
                label: '新建项目',
                data: [1, 2, 3, 2, 4, 2],
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgba(255, 99, 132, 0.1)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // 项目状态分布图
    const statusCtx = document.getElementById('statusChart').getContext('2d');
    new Chart(statusCtx, {
        type: 'doughnut',
        data: {
            labels: ['进行中', '已完成', '暂停', '计划中'],
            datasets: [{
                data: [3, 2, 1, 1],
                backgroundColor: [
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(75, 192, 192, 0.8)',
                    'rgba(255, 206, 86, 0.8)',
                    'rgba(153, 102, 255, 0.8)'
                ],
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
    
    // 实时更新时间
    function updateTime() {
        const now = new Date();
        const timeString = now.toLocaleString('zh-CN');
        $('#currentTime').text(timeString);
    }
    
    // 每秒更新时间
    setInterval(updateTime, 1000);
    updateTime();
});
</script>
{% endblock %}